<!-- 静态数据演示版本 适合任何后端 -->
<template>
  <view class="app">
    <button @click="openSkuPopup()">打开SKU组件</button>

    <vk-data-goods-sku-popup
      ref="skuPopup"
      v-model="skuKey"
      border-radius="20"
      :localdata="goodsInfo"
      :mode="skuMode"
      @open="onOpenSkuPopup"
      @close="SkuPopup"
      @add-cart="addCart"
      @buy-now="buyNow"
    ></vk-data-goods-sku-popup>
  </view>
</template>

<script>
var that; // 当前页面对象
export default {
  data() {
    return {
      // 是否打开SKU弹窗
      skuKey: false,
      // SKU弹窗模式
      skuMode: 1,
      // 后端返回的商品信息
      goodsInfo: {},
    };
  },
  // 监听 - 页面每次【加载时】执行(如：前进)
  onLoad(options) {
    that = this;
    that.init(options);
  },
  methods: {
    // 初始化
    init(options = {}) {},
    // 获取商品信息，并打开sku弹出
    openSkuPopup() {
      /**
       * 获取商品信息
       * 这里可以看到每次打开SKU都会去重新请求商品信息,为的是每次打开SKU组件可以实时看到剩余库存
       */
      // 此处写接口请求，并将返回的数据进行处理成goodsInfo的数据格式，
      // goodsInfo是后端返回的数据
      that.goodsInfo = {
        _id: "001",
        name: "iphone11",
        goods_thumb:
          "https://img14.360buyimg.com/n0/jfs/t1/59022/28/10293/141808/5d78088fEf6e7862d/68836f52ffaaad96.jpg",
        sku_list: [
          {
            _id: "001",
            goods_id: "001",
            goods_name: "iphone11",
            image:
              "https://img14.360buyimg.com/n0/jfs/t1/79668/22/9987/159271/5d780915Ebf9bf3f4/6a1b2703a9ed8737.jpg",
            price: 19800,
            sku_name_arr: ["红色", "128G", "公开版"],
            stock: 100,
          },
          {
            _id: "002",
            goods_id: "001",
            goods_name: "iphone11",
            image:
              "https://img14.360buyimg.com/n0/jfs/t1/52252/35/10516/124064/5d7808e0E46202391/7100f3733a1c1f00.jpg",
            price: 9800,
            sku_name_arr: ["白色", "256G", "公开版"],
            stock: 100,
          },
          {
            _id: "003",
            goods_id: "001",
            goods_name: "iphone11",
            image:
              "https://img14.360buyimg.com/n0/jfs/t1/79668/22/9987/159271/5d780915Ebf9bf3f4/6a1b2703a9ed8737.jpg",
            price: 19800,
            sku_name_arr: ["红色", "256G", "公开版"],
            stock: 100,
          },
        ],
        spec_list: [
          {
            list: [
              {
                name: "红色",
              },
              {
                name: "黑色",
              },
              {
                name: "白色",
              },
            ],
            name: "颜色",
          },
          {
            list: [
              {
                name: "128G",
              },
              {
                name: "256G",
              },
            ],
            name: "内存",
          },
          {
            list: [
              {
                name: "公开版",
              },
              {
                name: "非公开版",
              },
            ],
            name: "版本",
          },
        ],
      };
      that.skuKey = true;
    },
    // sku组件 开始-----------------------------------------------------------
    onOpenSkuPopup() {
      console.log("监听 - 打开sku组件");
    },
    SkuPopup() {
      console.log("监听 - 关闭sku组件");
    },
    // 加入购物车前的判断
    addCartFn(obj) {
      let { selectShop } = obj;
      // 模拟添加到购物车,请替换成你自己的添加到购物车逻辑
      let res = {};
      let name = selectShop.goods_name;
      if (selectShop.sku_name != "默认") {
        name += "-" + selectShop.sku_name_arr;
      }
      res.msg = `${name} 已添加到购物车`;
      if (typeof obj.success == "function") obj.success(res);
    },
    // 加入购物车按钮
    addCart(selectShop) {
      console.log("监听 - 加入购物车");
      that.addCartFn({
        selectShop: selectShop,
        success: function (res) {
          // 实际业务时,请替换自己的加入购物车逻辑
          that.toast(res.msg);
          setTimeout(function () {
            that.skuKey = false;
          }, 300);
        },
      });
    },
    // 立即购买
    buyNow(selectShop) {
      console.log("监听 - 立即购买");
      that.addCartFn({
        selectShop: selectShop,
        success: function (res) {
          // 实际业务时,请替换自己的立即购买逻辑
          that.toast("立即购买");
        },
      });
    },
    toast(msg) {
      uni.showToast({
        title: msg,
        icon: "none",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.app {
  padding: 30rpx;
  font-size: 28rpx;
}
</style>
